<template>
  <div class="center">
    <div style="height: 100%;width: 100%">
       <div class="center-user">
         <div class="center-touxiang">
           <div class="iconfont icon-wode"></div>
         </div>
         <span style="font-weight: bold">{{username}}</span>
        <div class="center-fl">
         <div class="fl-main">
           <p>电影卷</p>
           <p>1张</p>
         </div>
         <div class="fl-main">
           <p>余额</p>
           <p>0.00$</p>
         </div>
        </div>
    </div>

    </div>
    <div class="center-main">
      <ul>
        <li  style="cursor:pointer;" @click="dingdan"><img src="../../static/image/dly.png" alt="">电影订单 <span> > </span></li>
        <li style="color: #989797;cursor: not-allowed"><img src="../../static/image/hb.png" alt="">组合红包<span> > </span></li>
        <li style="color: #989797;cursor: not-allowed"><img src="../../static/image/kf.png" alt="">帮助与客服<span> > </span></li>
        <li style="color: #989797;cursor: not-allowed"><img src="../../static/image/sz.png" alt="">设置<span> > </span></li>
        <div class="main-zx" @click="zx">注销</div>
      </ul>
    </div>
    <router-view/>
  </div>
</template>

<script>
import Cookies from "js-cookie";
import ajax from "@/util/ajax";
import http from "@/util/http";
// import axios from "axios";
import vuex from '@/store/index';
export default {
  data() {
    return {
      username:this.$store.state.userCookie,
      id: '',
      userCookie: this.$store.state.userCookie
    }
  },
  methods: {
    dingdan() {
      this.$router.push('/dingdan')
    },
    zx() {

      // Cookies.remove('inb')
      // this.$router.push('/login')

      //404 为解决

      // ajax({
      //   url:`http://localhost:3000/cookie`,
      //   method:"DELETE",
      //   data: {
      //     user:'inb',
      //     pwd:123
      //   },
      //   headers:{"Content-Type":"application/x-www-form-urlencoded"},
      //   success:(res) =>{
      //     console.log("删除成功");
      //   },
      //   error:function() {
      //
      //   }
      // })

      //删除指定id
      http.get('/cookie', {
        params: {
          //路由持久化
          user:this.$store.state.userCookie
          // user: 'inb'
        }
      }).then(res => {
        this.id = res.data[0].id
      }).then(res => {
        http.delete(`/cookie/${this.id}`, {}).then(rex => {
          Cookies.remove(`${this.userCookie}`)
          this.$store.commit("emptyCookie")   //清除持久化数据
          this.$router.push('/login')
          console.log('删除成功')
        })
      })

    }
  },
  mounted() {
    this.user = Cookies.get()
  },
  created() {

  },
  //局部路由拦截
  beforeRouteEnter(to, from, next) {
    if (vuex.state.userCookie!='') {
      // if (Cookies.get('inb')) {
        next()
      } else {
        next({
          path: '/login',
          // query: {aaa:to.fullPath}
        })
      }
    }

}
</script>

<style scoped lang="scss">
.center{
  width: 100%;
  height: 100%;
}
.center-user {
  width: 100%;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-image: linear-gradient(to right , #7A88FF, #7AFFAF);
}
  .center-touxiang{
    background-color: #39a9ed;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    display: flex;
    .icon-wode{
      font-size: 40px;
      margin: auto;
    }
  }
  .center-fl{
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    text-align: center;
  }
.center-main{
  height: 300px;
  width: 100%;
  padding: 10px 0;

}
.center-main li{
  margin: 10px 10px;
  border-bottom: 1px solid #989797;
  font-size: 14px;
  line-height: 40px;
}
.center-main li span{
  margin-right: 10px;
  float: right;
}
.center-main img{
  width: 20px;
  height: 20px;
  position: relative;
  top: 4px;
  margin-right: 8px;
}
.main-zx{
  margin: 50px;
  background-color: #ec8181;
  line-height: 50px;
  border-radius: 50px;
  text-align: center;
}
</style>
